<template>
  <div class="performance-charts">
    <!-- 6 个图表容器 -->
    <div class="chart-item">
      <h3 style="text-align: center;">RC²迭代过程曲线</h3>
      <div class="chart" id="rcChart"></div>
    </div>
    <div class="chart-item">
      <h3 style="text-align: center;">RMSECV迭代过程曲线</h3>
      <div class="chart" id="rmsecvChart"></div>
    </div>
    <div class="chart-item">
      <h3 style="text-align: center;">RP²迭代过程曲线</h3>
      <div class="chart" id="rpChart"></div>
    </div>
    <div class="chart-item">
      <h3 style="text-align: center;">RMSEP迭代过程曲线</h3>
      <div class="chart" id="rmsepChart"></div>
    </div>
    <div class="chart-item">
      <h3 style="text-align: center;">RPD迭代过程曲线</h3>
      <div class="chart" id="rpdChart"></div>
    </div>
    <div class="chart-item">
      <h3 style="text-align: center;">T_VALUE迭代过程曲线</h3>
      <div class="chart" id="tValueChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PerformanceCharts',
  props: {
    avgPerfHistory: {
      type: Array,
      required: true
    },
    bestPerfHistory: {
      type: Array,
      required: true
    }
  },
  mounted() {
    // 依次初始化 6 个图表
    this.initChart('rcChart', 'RC²', 'RC²', 'rc2');
    this.initChart('rmsecvChart', 'RMSECV', 'RMSECV', 'rmsecv');
    this.initChart('rpChart', 'RP²', 'RP²', 'rp2');
    this.initChart('rmsepChart', 'RMSEP', 'RMSEP', 'rmsep');
    this.initChart('rpdChart', 'RPD', 'RPD', 'rpd');
    this.initChart('tValueChart', 'T_VALUE', 'T_VALUE', 't_value');
  },
  methods: {
    initChart(chartDomId, title, yAxisName, dataKey) {
      const chartDom = document.getElementById(chartDomId);
      const myChart = echarts.init(chartDom);

      // 构造 x 轴数据（迭代次数，从 1 开始）
      const xData = this.avgPerfHistory.map((_, index) => index + 1);

      // 构造两条线的数据
      const avgData = this.avgPerfHistory.map(item => item[dataKey]);
      const bestData = this.bestPerfHistory.map(item => item[dataKey]);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {
          data: ['Average', 'Best']
        },
        xAxis: {
          type: 'category',
          data: xData,
          name: '迭代数',
          nameLocation: 'middle',
          nameGap: 30
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Average',
            type: 'line',
            data: avgData,
            smooth: true,
            lineStyle: { color: '#f7931e' } // 橙色，可自定义
          },
          {
            name: 'Best',
            type: 'line',
            data: bestData,
            smooth: true,
            lineStyle: { color: '#0088ff' } // 蓝色，可自定义
          }
        ]
      };

      myChart.setOption(option);
      // 监听窗口resize，保证响应式
      window.addEventListener('resize', () => myChart.resize());
    }
  }
};
</script>

<style scoped>
.performance-charts {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列布局，可根据需求调整 */
  gap: 20px;
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.chart-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chart {
  width: 35vw;
  height: 400px;
  min-height: 300px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .performance-charts {
    grid-template-columns: 1fr;
  }
}

/* 滚动条样式 */
.performance-charts::-webkit-scrollbar {
  width: 6px;
}
.performance-charts::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.performance-charts::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.performance-charts::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
